﻿@{
    Layout = "_LayoutPopups";
}

<div id="test" style="width:100%;height:50px;">

</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>颜色选择器</legend>
</fieldset>
<div style="margin-left: 30px;">
    <input type="hidden" name="color" value="" id="test-all-input">
    <div id="test-all"></div>
</div>




@section scripts{
    <script>
        layui.use(['colorpicker', 'layer'], function () {
            var $ = layui.$
                , layer = layui.layer
                , colorpicker = layui.colorpicker;

            //开启全功能
            colorpicker.render({
                elem: '#test-all'
                , color: 'rgba(7, 155, 140, 1)'
                , format: 'rgb'
                , predefine: true
                , alpha: true
                , done: function (color) {
                    $('#test-all-input').val(color); //向隐藏域赋值
                    layer.tips('给指定隐藏域设置了颜色值：' + color, this.elem);

                    color || this.change(color); //清空时执行 change
                }
                , change: function (color) {
                    //给当前页面头部和左侧设置主题色
                    $('#test').css('background-color', color);
                }
            });

        });
    </script>
}